import React from 'react'
import { connect } from 'react-redux'
import { Input, Button, List } from 'antd'
import 'antd/dist/antd.css'

const App = (props) => {
  const { inputValue, list, changeInputValue, handleBtnClick, handleDeleteClick } = props

  return (
    <div style={{ margin: 10 }}>
      <Input style={{ width: 250, marginRight: 10 }} value={inputValue} onChange={changeInputValue}></Input>
      <Button onClick={handleBtnClick}>提交</Button>
      <List style={{ width: 250, marginTop: 10, cursor: 'pointer' }} bordered dataSource={list} renderItem={(item,index) => (<List.Item onClick={() => {handleDeleteClick(index)}}>{item}</List.Item>)}></List>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    changeInputValue(e) {
      const action = {
        type: 'change_input_value',
        value: e.target.value
      }
      dispatch(action)
    },
    handleBtnClick() {
      const action = {
        type: 'add_item'
      }
      dispatch(action)
    },
    handleDeleteClick(index) {
      const action = {
        type: 'del_item',
        index
      }
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)


